<template>
  <a 
    v-if="!disabled"
    :href="sanitizeUrl(href || '#')"
    :target="target"
    :rel="relComputed"
    class="tui-link"
    :class="[typeClass, disabledClass, underlineClass]"
    @click="handleClick"
  >
    <span class="tui-link__icon" v-if="icon">
      <tui-icon :icon="icon"></tui-icon>
    </span>
    <span class="tui-link__content">
      <slot></slot>
    </span>
  </a>
  <span 
    v-else
    class="tui-link"
    :class="[typeClass, disabledClass, underlineClass]"
  >
    <span class="tui-link__icon" v-if="icon">
      <tui-icon :icon="icon"></tui-icon>
    </span>
    <span class="tui-link__content">
      <slot></slot>
    </span>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';

import type { TuiLinkProps } from './types';

// 使用withDefaults设置默认值
const props = withDefaults(defineProps<TuiLinkProps>(), {
  type: 'default',
  underline: 'hover',
  disabled: false,
  target: '_self',
  rel: '',
  className: ''
});  


const emit = defineEmits<{
  (e: 'click', event: MouseEvent): void;
}>();

const handleClick = (event: MouseEvent) => {
  emit('click', event);
};

// 计算类型样式
const typeClass = computed(() => `tui-link--${props.type}`);

// 计算禁用样式
const disabledClass = computed(() => props.disabled ? 'tui-link--disabled' : '');

// 计算下划线样式
const underlineClass = computed(() => {
  if (typeof props.underline === 'boolean') {
    return props.underline ? 'tui-link--underline-always' : 'tui-link--underline-never';
  }
  return `tui-link--underline-${props.underline}`;
});

// 计算rel属性，为_blank链接自动添加noopener noreferrer
const relComputed = computed(() => {
  if (props.target === '_blank') {
    if (props.rel) {
      // 如果用户已经提供了rel属性，确保包含noopener noreferrer
      const relParts = props.rel.split(' ');
      if (!relParts.includes('noopener')) relParts.push('noopener');
      if (!relParts.includes('noreferrer')) relParts.push('noreferrer');
      return relParts.join(' ');
    }
    // 如果没有提供rel属性，自动添加noopener noreferrer
    return 'noopener noreferrer';
  }
  // 非_blank链接使用用户提供的rel属性
  return props.rel;
});

// URL安全处理
const sanitizeUrl = (url: string): string => {
  if (!url || url === '#') return '#';
  
  try {
    const allowedProtocols = ['http:', 'https:'];
    const parsed = new URL(url, window.location.origin);
    return allowedProtocols.includes(parsed.protocol) ? parsed.href : '#';
  } catch {
    return '#';
  }
};
</script>

<style lang="scss" scoped>
.tui-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  
  // 类型样式
  &--default {
    color: var(--tui-color-text-primary);
    
    &:hover {
      color: var(--tui-color-primary);
    }
  }
  
  &--primary {
    color: var(--tui-color-primary);
    
    &:hover {
      color: var(--tui-color-primary-light-3);
    }
  }
  
  &--success {
    color: var(--tui-color-success);
    
    &:hover {
      color: var(--tui-color-success-light-3);
    }
  }
  
  &--info {
    color: var(--tui-color-info);
    
    &:hover {
      color: var(--tui-color-info-light-3);
    }
  }
  
  &--warning {
    color: var(--tui-color-warning);
    
    &:hover {
      color: var(--tui-color-warning-light-3);
    }
  }
  
  &--danger {
    color: var(--tui-color-danger);
    
    &:hover {
      color: var(--tui-color-danger-light-3);
    }
  }
  
  // 禁用样式
  &--disabled {
    color: var(--tui-color-text-placeholder);
    cursor: not-allowed;
    // pointer-events: none;
  }
  
  // 下划线样式
  &--underline-always {
    text-decoration: underline;
  }
  
  &--underline-hover {
    &:hover {
      text-decoration: underline;
    }
  }
  
  &--underline-never {
    text-decoration: none;
  }
  
  // 图标样式
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  // 内容样式
  &__content {
    white-space: nowrap;
  }
  
  // 聚焦样式
  &:focus {
    outline: 2px solid var(--tui-color-primary-light-3);
    outline-offset: 2px;
    border-radius: 2px;
  }
}
</style>